<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box">
            <div>111
                <div>222</div>
            </div>
            <p>我是段落</p>
            我是文本
            <div>333</div>
        </div>
    </div>

    <script>
        // 一、子关系 ： 1.子元素  2.子节点 
        // 一、子关系
        // 1.所有的子节点 ： 元素.childNodes;
        // var boxEle = document.querySelector(".box");
        // console.log( boxEle.childNodes  );

        // 2.获取所有的子元素 ：元素.children
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.children);
        //  boxEle.children[0].children[0].style.background = "red";

        // 3.获取第一个子节点；元素.firstChild;
        // var boxEle = document.querySelector(".box");
        // console.log(  boxEle.firstChild);

        // 4.获取第一个子元素：元素.firstElementChild;
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.firstElementChild);


        // 5.获取最后一个子节点 ： 元素.lastChild;
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.lastChild);

        // 6.获取最后一个子元素 ： 元素.lastElementChild;
        // var boxEle = document.querySelector(".box");
        // console.log( boxEle.lastElementChild);


        // 二、父关系 

        // 1.父节点  ：parentNode ，父节点需要获取一个容器 ，父节点获取到的也是父元素；
        //  var  boxEle = document.querySelector(".box");
        //  console.log( boxEle.parentNode);

        // 2.父元素 ：
        // var  boxEle = document.querySelector(".box");
        // // console.log( boxEle.parentElement);
        // console.log(boxEle.parentElement.parentElement.parentElement.parentNode)



        // 1.写一遍 2.练习 



    </script>
</body>

</html>